<script setup>
import {useRouter} from 'vue-router';

const router = useRouter();

function empClick() {
  // router.push('/employee/rose/20/女');
  // params传参方式, 必须使用组件的name
  router.push({
    name: 'Employee',
    params: {
      name: 'rose', 
      age: 20, 
      gender: '女'
    }
  });
}

function orderClick() {
  // router.push('/order?id=002&money=1000.00&type=wx');
  router.push({
    path: '/order',
    query: {
      id: '002',
      money: 1000.00,
      type: 'wx'
    }
  });
}
</script>

<template>
  <router-link to="/home">首页</router-link>
  <router-link to="/news">新闻</router-link>
  <router-link to="/message">消息</router-link>
  <!-- 路径参数 -->
  <router-link to="/product/101">商品</router-link>
  <router-link to="/user/001">用户中心</router-link>
  <router-link :to="{name: 'Employee', params: {name: 'zhangsan', age: 18, gender: '男'}}">params传参方式一</router-link>
  <button @click="empClick">params传参方式二</button>
  <router-link :to="{path: '/order', query: {id: '001', money: 666.00, type: 'alipay'}}">query传参方式一</router-link>
  <button @click="orderClick">query传参方式二</button>

  <router-view></router-view>

  <!-- 
    Vue Router使用步骤:

    1.整合vue-router(npm install vue-router@4)
    2.配置vue-router
      2.1.定义路由表routes
      2.2.创建路由器实例router
      2.3.导出路由器实例router
    3.Vue实例使用router
    4.配置router-link和router-view, 完成路由跳转功能
  -->
</template>

<style scoped>
a {
  margin-left: 10px;
}
</style>